<script setup lang="ts">
import { onMounted } from "vue";
import AppHeaderVue from "./components/AppHeader/AppHeader.vue";
import AppLeftMenuVue from "./components/AppLeftMenu/AppLeftMenu.vue";
import useCommonStore from "@/stores/common";
import PlayListPopupVue from "./components/PlayListPopup/PlayListPopup.vue";

import PlayingControlVue from "./views/playingControl/playingControl.vue";

const commonStore = useCommonStore();

onMounted(() => {
  commonStore.updatePlaylistCategoryDict();
});
</script>

<template>
  <div class="musicAppContainer" id="app">
    <AppHeaderVue />
    <div class="AppMainPanel" id="appMainpanel">
      <AppLeftMenuVue />
      <div class="AppRouteContainer">
        <router-view />
      </div>
      <PlayListPopupVue />
    </div>
    <div class="AppFooter">
      <PlayingControlVue />
    </div>
  </div>
</template>

<style scoped lang="less">
.musicAppContainer {
  height: 100vh;
  width: 100%;
  background-color: #fff;

  .AppMainPanel {
    height: calc(100% - 136px);
    display: flex;
    position: relative;
  }
  .AppRouteContainer {
    height: 100%;
    width: 100%;
    padding: 0 10px;
  }
  .AppFooter {
    height: 76px;
    border-top: 1px solid rgb(224, 224, 224);
  }
}
</style>
